<template>
  <div class="login-wrapper" :class="[rotateType]" @dblclick.stop>
    <div class="login" :class="[systemSettingStore.$state.deskAppRangeType]">
      <div class="top">
        <span>
          <i class="iconfont wos-QQ fs32" />
          QQ
        </span>
        <system-child-btn class="btn" :is-max-btn="false" :perv-icon-list="systemIcon" />
      </div>
      <div class="content">
        <ul class="form" @mousedown.stop>
          <li class="avatar">
            <img src="@/assets/images/weChat/avatar.jpg" alt="avatar" />
            <div class="status"></div>
          </li>
          <li class="account mt8">
            <span><i class="iconfont wos-QQ" /></span>
            <input v-model="account" type="text" placeholder="QQ号码/手机/邮箱" />
          </li>
          <li class="account mt4">
            <span><i class="iconfont wos-lock-qq" /></span>
            <input v-model="password" type="password" placeholder="密码" />
          </li>
          <li class="auto">
            <span @click.stop="handleAutoSignIn">
              <em><i v-show="autoSignIn" class="iconfont wos-checked-right fs12" /></em>
              自动登录
            </span>
            <span @click.stop="handleSavePassword">
              <em><i v-show="savePassword" class="iconfont wos-checked-right fs12" /></em>
              记住密码
            </span>
            <span>找回密码</span>
          </li>
          <li class="sign" @click.stop="$emit('login')">登录</li>
        </ul>
        <div class="register" @mousedown.stop>注册账号</div>
        <img src="@/assets/images/weChat/code.png" alt="code" class="code" @mousedown.stop />
      </div>
    </div>
    <div class="login-back">
      <div class="content">
        <div class="top">
          <system-child-btn class="btn" :is-max-btn="false" />
        </div>
        <dl class="setting">
          <dt>网络设置</dt>
          <dd>
            <div class="item">
              <span>类型: </span>
              <input type="text" style="width: 120px; height: 24px" />
            </div>
            <div class="item">
              <span>地址: </span>
              <input type="text" style="width: 86px; height: 24px" />
            </div>
            <div class="item">
              <span>端口: </span>
              <input type="text" style="width: 54px; height: 24px" />
            </div>
          </dd>
          <dd class="pt10">
            <div class="item">
              <span>用户名: </span>
              <input type="text" style="width: 120px; height: 24px" />
            </div>
            <div class="item">
              <span>密码: </span>
              <input type="text" style="width: 86px; height: 24px" />
            </div>
            <div class="item">
              <span>域: </span>
              <input type="text" style="width: 54px; height: 24px" />
            </div>
          </dd>
          <dt class="pt30">登录服务器</dt>
          <dd>
            <div class="item">
              <span>类型: </span>
              <input type="text" style="width: 120px; height: 24px" />
            </div>
            <div class="item">
              <span>地址: </span>
              <input type="text" style="width: 86px; height: 24px" />
            </div>
            <div class="item">
              <span>端口: </span>
              <input type="text" style="width: 54px; height: 24px" />
            </div>
          </dd>
        </dl>
      </div>
      <div class="bottom">
        <div class="btn" @click="rotateType = 'rotate2'">确定</div>
        <div class="btn" @click="rotateType = 'rotate2'">取消</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SystemChildBtn from '@/base/systemWindow/systemChildBtn.vue'
import { computed, inject, ref } from 'vue'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'

const appId = inject<string>('appId') || ''
const taskId = inject<string>('taskId') || ''
const componentData = inject<{ [key: string]: unknown }>('componentData')

const runningTasksStore = useRunningTasksStore()
const systemSettingStore = useSystemSettingStore()

const autoSignIn = ref<boolean>(!!componentData?.autoSignIn)
const savePassword = ref<boolean>(!!componentData?.savePassword)
const account = ref<string>('316643470')
const password = ref<string>('123456')
const rotateType = ref<'rotate' | 'rotate2' | ''>('')

const systemIcon = computed(() => {
  return systemSettingStore.$state.deskAppRangeType === 'ios'
    ? []
    : [
        {
          icon: 'wos-setting-qq',
          event: handleSetting
        }
      ]
})

const handleSetting = () => {
  rotateType.value = 'rotate'
}

const handleAutoSignIn = () => {
  autoSignIn.value = !autoSignIn.value
  if (autoSignIn.value) savePassword.value = true
  runningTasksStore.setTaskPatch(appId, taskId, {
    componentData: {
      autoSignIn: autoSignIn.value,
      savePassword: savePassword.value
    }
  })
}
const handleSavePassword = () => {
  savePassword.value = !savePassword.value
  if (!savePassword.value) autoSignIn.value = false
  runningTasksStore.setTaskPatch(appId, taskId, {
    componentData: {
      autoSignIn: autoSignIn.value,
      savePassword: savePassword.value
    }
  })
}
</script>

<style scoped lang="scss">
@keyframes rotate {
  0% {
    transform: perspective(800px) translateZ(0);
  }
  20% {
    transform: perspective(800px) translateZ(-100px);
  }
  80% {
    transform: perspective(800px) translateZ(-100px) rotateY(-180deg);
  }
  100% {
    transform: perspective(800px) translateZ(0) rotateY(-180deg);
  }
}

@keyframes rotate2 {
  0% {
    transform: perspective(800px) translateZ(0) rotateY(-180deg);
  }
  20% {
    transform: perspective(800px) translateZ(-100px) rotateY(-180deg);
  }
  80% {
    transform: perspective(800px) translateZ(-100px);
  }
  100% {
    transform: perspective(800px) translateZ(0);
  }
}

@keyframes rotate-back {
  0% {
    transform: perspective(800px) translateZ(0) rotateY(-180deg);
  }
  20% {
    transform: perspective(800px) translateZ(-100px) rotateY(-180deg);
  }
  80% {
    transform: perspective(800px) translateZ(-100px) rotateY(-360deg);
  }
  100% {
    transform: perspective(800px) translateZ(0) rotateY(-360deg);
  }
}

@keyframes rotate-back2 {
  0% {
    transform: perspective(800px) translateZ(0) rotateY(-360deg);
  }
  20% {
    transform: perspective(800px) translateZ(-100px) rotateY(-360deg);
  }
  80% {
    transform: perspective(800px) translateZ(-100px) rotateY(-180deg);
  }
  100% {
    transform: perspective(800px) translateZ(0) rotateY(-180deg);
  }
}

.login-wrapper {
  width: 100%;
  height: 100%;
  position: relative;

  &.rotate {
    .login {
      animation: rotate 1s ease-in-out forwards;
    }

    .login-back {
      animation: rotate-back 1s ease-in-out forwards;
    }
  }

  &.rotate2 {
    .login {
      animation: rotate2 1s ease-in-out forwards;
    }

    .login-back {
      animation: rotate-back2 1s ease-in-out forwards;
    }
  }

  .btn {
    height: 34px;
  }

  .login {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background-color: #fff;
    transform-origin: center center;
    backface-visibility: hidden;

    &.login-enter-active,
    &.login-leave-active {
      transition: all 0.3s ease !important;
    }

    &.login-enter-from,
    &.login-leave-to {
      opacity: 0;
      transform: translateX(100%);
    }

    &.ios {
      .top {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 18px;

        > span {
          margin-top: -80px !important;
        }
      }
    }

    .top {
      color: #fff;
      height: 127px;
      background-color: rgb(31, 199, 253);

      > span {
        text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
        margin-left: 10px;
        margin-top: 12px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
      }
    }

    .content {
      position: relative;
      width: 100%;
      height: calc(100% - 127px);

      .form {
        position: absolute;
        left: 50%;
        top: -38px;
        transform: translateX(-50%);
        width: 238px;

        li.avatar {
          position: relative;
          margin: 0 auto;
          width: 68px;
          height: 68px;
          border-radius: 50%;
          border: 2px solid #fff;
          box-sizing: border-box;
          box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: contain;
          }

          .status {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid #fff;
            box-sizing: border-box;
            background-color: rgb(9, 241, 117);
          }
        }

        li.account {
          width: 100%;
          height: 32px;
          display: flex;
          border-bottom: 1px solid rgb(229, 229, 229);
          position: relative;

          &:focus-within {
            span {
              color: rgb(18, 183, 245);
            }

            &::after {
              width: 238px;
            }
          }

          &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 0;
            transition: all 0.3s;
            height: 1px;
            background-color: rgb(18, 183, 245);
          }

          &:hover {
            border-color: rgb(193, 193, 193);
          }

          > span {
            display: inline-flex;
            align-items: center;
            width: 20px;
            color: rgb(184, 184, 188);
          }

          input {
            width: 100%;
            height: 100%;
            padding-top: 2px;
            outline: none;
            font-size: 16px;
            font-weight: 100;

            &::placeholder {
              font-size: 12px;
            }
          }
        }

        li.auto {
          padding-top: 10px;
          padding-bottom: 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          > span {
            display: inline-flex;
            align-items: center;
            color: rgb(166, 166, 166);

            &:hover {
              em {
                border-color: rgb(171, 171, 171);
              }
            }

            > em {
              margin-right: 5px;
              display: inline-flex;
              justify-content: center;
              align-items: center;
              width: 14px;
              height: 14px;
              box-sizing: border-box;
              border: 1px solid rgb(204, 204, 204);
              border-radius: 2px;
              color: rgb(31, 199, 253);

              i {
                display: inline-block;
                transform-origin: center center;
                transform: scale(0.8);
              }
            }
          }
        }

        li.sign {
          color: #fff;
          height: 34px;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          background: linear-gradient(180deg, rgb(11, 194, 255), rgb(0, 182, 250));
        }
      }

      .register {
        position: absolute;
        left: 12px;
        bottom: 12px;
        color: rgb(166, 166, 166);

        &:hover {
          color: rgb(131, 131, 131);
        }
      }

      .code {
        position: absolute;
        right: 12px;
        bottom: 12px;
      }
    }
  }

  .login-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    backface-visibility: hidden;
    transform: perspective(800px) rotateY(-180deg);

    .content {
      width: 100%;
      height: calc(100% - 34px);
      background: linear-gradient(180deg, rgb(31, 199, 253), transparent 50%);

      .setting {
        padding: 70px 20px 0;

        dt {
          padding-bottom: 24px;
        }

        dd {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .item {
            display: flex;
            align-items: center;

            > span {
              display: inline-block;
              width: 40px;
              text-align: right;
              margin-right: 5px;
            }

            input {
              border: 1px solid rgb(219, 219, 219);
            }
          }
        }
      }
    }

    .bottom {
      width: 100%;
      height: 34px;
      background-color: rgb(205, 226, 242);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      box-sizing: border-box;

      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 6px;
        width: 84px;
        height: 24px;
        color: rgb(0, 28, 48);
        border: 1px solid rgb(134, 148, 158);
        border-radius: 2px;
        background-color: rgb(244, 244, 244);
      }
    }
  }
}
</style>
